import React from 'react'
import store from '../../store/store'

//引入创建好的action
import { incrementAction, decrementAction,waitIncrementAction} from '../../store/actions/countAction';


//完整版就是把action单独处理
//把dispatch里面的东西单独保存处理


export default function Count() {
  // 这个放上面,因为下面要判断count
  const { count } = store.getState().count


  //这边向store发送信息后,store给reducer处理,reducer在里解构接收
  //累加
    const incrementHandle = () => {
      // 点击时向store发送信息
      store.dispatch(incrementAction(1))
    }
  
    const decrementHandle = () => {
      //累减
      store.dispatch(decrementAction(1))
  
    }
  
    const ifOddDecrementHandle = () => {
      //奇数加一
      // 判断2%不等于0,就累加
      if(count%2 !== 0 ){
        store.dispatch(incrementAction(1))
      }
    }
    
    //由于这里定时器时异步,而我们要把所有的操作放到action里.
    
    const waitDecrementHandle = () => {
      // 定时器累加
      store.dispatch(waitIncrementAction(1))
    }

    
  return (
    <div>
         <h1>我是Count组件 我的值是{count }</h1>
      <div>
        <button onClick={incrementHandle}>累加</button>
        <button onClick={decrementHandle}>累减</button>
        <button onClick={ifOddDecrementHandle}>如果是奇数再加1</button>
        <button onClick={waitDecrementHandle}>等2s再加1</button>
      </div>
    </div>
  )
}
